<template>
    <view class="mine" style="position: relative">
        <view class="custom" :style="'top:' + customTop + 'px'">
            <text>我的</text>
        </view>
        <view class="main">
            <view class="header" :style="'padding-top:' + titleHeight + 'px'"></view>
        </view>
        <view class="index">
            <!--            <view class="dis_f_r_c c_f m_b_10 m_r_20" @click="handleExit">
                            <uni-icons type="download" size="25" color="#fff" style=" transform: rotate(-90deg);"></uni-icons>
                        </view>-->
            <!-- 头像 -->
            <view class="avatar">
                <view class="dis_f_sb_c">
                    <view class="avatar-box" style="flex: 1">
                        <u-image width="120rpx" height="120rpx" :src="myInfoVo.wxAvatar" @click="handleAvatar" v-if="myInfoVo.wxAvatar" shape="circle"></u-image>
                        <u-image width="120rpx" height="120rpx" src="/static/img/avatar.png" @click="handleAvatar" shape="circle" v-else></u-image>
                        <view class="userId">
                            <view class="phonenumber" @click="handleAvatar"> {{userInfo.nickName}} </view>
                            <view class="info"> {{userInfo.phonenumber}} </view>
                        </view>
                    </view>
                    <view class="dis_f_co_c_c" @click="showQrCode = true">
                        <view style="font-weight: 700;margin-bottom: 10rpx;">
                            <u-image width="40rpx" height="40rpx" src="/static/img/qrcode.png"></u-image>
                        </view>
                        <view style="color: #999;font-size: 24rpx;">邀请码</view>
                    </view>
                </view>
                <!-- 钱包 -->
                <!--                <view>
                                    <u-grid :border="true" col="1">
                                        &lt;!&ndash;                        <u-grid-item @click="showAudit=true">
                                                                    <view style="font-weight: 700;margin-bottom: 10rpx;">
                                                                        <text style="font-size: 20rpx;">¥ </text>
                                                                        {{userInfo.amount}}
                                                                    </view>
                                                                    <view style="color: #999;font-size: 24rpx;">我的佣金</view>
                                                                </u-grid-item>&ndash;&gt;
                                        <u-grid-item @click="showQrCode = true">
                                            <view style="font-weight: 700;margin-bottom: 10rpx;">
                                                <u-image width="40rpx" height="40rpx" src="/static/img/qrcode.png"></u-image>
                                            </view>
                                            <view style="color: #999;font-size: 24rpx;">邀请码</view>
                                        </u-grid-item>
                                    </u-grid>
                                </view>-->

                <view class="p_10 m_t_20 vip_box dis_f_sb_c c_f"  @click="handleToVip">
                    <view class="dis_f_l_c ">
                        <view class="f_w_b f_s_20">VIP</view>
                        <view class=" m_l_10">
                            <view class="f_s_16 dis_f_l_c">
                                会员卡
                                <view class="f_s_12 m_l_10" v-if="userInfo.ifhy" > 剩余{{userInfo.hyNumber}}次</view>
                            </view>
                            <view class="f_s_12 m_t_5" v-if="!userInfo.ifhy">充值会员后免费发布招工信息</view>
                            <view class="f_s_12 m_t_5" v-else > 有效期至 {{userInfo.gqTime}}</view>
                        </view>
                    </view>
                    <view>
                        <u-button v-if="!userInfo.ifhy" type="primary" color="#a96c07" size="small" shape="circle">立即开通</u-button>
                    </view>
                </view>
            </view>
            <!-- 客服 -->
            <!--            <view class="order">
                            <view class="kefu" @click="showPhone = true">
                                <view class="kefu-left">
                                    <u-image width="38rpx" height="38rpx" src="/static/img/kefu.png"></u-image>
                                    <text style="margin-left: 16rpx;">客服中心</text>
                                </view>
                                <u-icon name="arrow-right"></u-icon>
                            </view>
                            <view style="height: 15rpx"></view>
                            <view class="kefu" @click="showAudit = true" v-if="isCash">
                                <view class="kefu-left">
                                    <u-image width="38rpx" height="38rpx" src="/static/img/qb.png"></u-image>
                                    <text style="margin-left: 16rpx;">钱包提现</text>
                                </view>
                                <u-icon name="arrow-right"></u-icon>
                            </view>
                        </view>-->


            <view class="card_box p_10 m_t_20">
                <u-grid :border="false" col="4">
                    <u-grid-item   @click="handleToSend">
                        <image src="@/static/img/fb.png" style="width: 100rpx;height: 100rpx;"></image>
                        <text class="grid-text">我的招聘</text>
                    </u-grid-item>
                    <u-grid-item   @click="handleToApply">
                        <image src="@/static/img/fbqz.png" style="width: 100rpx;height: 100rpx;"></image>
                        <text class="grid-text">我的求职</text>
                    </u-grid-item>
                    <u-grid-item   @click="handleToLike">
                        <image src="@/static/img/wdsc.png" style="width: 100rpx;height: 100rpx;"></image>
                        <text class="grid-text">我的申请</text>
                    </u-grid-item>
<!--                                        <u-grid-item  @click="handleCashRecord(0)">
                                            <image src="@/static/img/wdyj.png" style="width: 100rpx;height: 100rpx;"></image>
                                            <text class="grid-text">我的佣金</text>
                                        </u-grid-item>
                                        <u-grid-item   @click="handleToDistribution">
                                            <image src="@/static/img/fxjl.png" style="width: 100rpx;height: 100rpx;"></image>
                                            <text class="grid-text">分销记录</text>
                                        </u-grid-item>-->
                    <u-grid-item   @click="handleShowPdf">
                                            <image src="@/static/img/fxjl.png" style="width: 100rpx;height: 100rpx;"></image>
                                            <text class="grid-text">上传简历</text>
                                        </u-grid-item>
                </u-grid>
            </view>
            <view class="card_box p_10 m_t_20">
                <u-cell-group :border="false">
                    <!--                    <u-cell icon="man-add" isLink title="实名认证" v-if="myInfoVo.ifCardReview==1||myInfoVo.ifCardReview==4" @click="handleToRealName"></u-cell>-->
                    <u-cell icon="share-square" isLink title="我的简历" @click="handleToPdf"></u-cell>
                    <u-cell icon="list" isLink title="已收简历" @click="handleHave"></u-cell>
<!--                    <u-cell icon="order" isLink title="我的简历" @click="handleToPdf"></u-cell>-->
                    <!--                    <u-cell icon="list-dot" isLink title="提现记录" @click="handleCashRecord(1)"></u-cell>-->
                    <u-cell icon="file-text" isLink title="投诉建议" @click="handleToIssue"></u-cell>
                    <u-cell icon="list-dot" v-if="isUp==2" isLink title="用户协议" @click="handleToAboutUs(1)"></u-cell>
                    <u-cell icon="account" v-if="isUp==2" isLink title="关于我们" @click="handleToAboutUs(2)"></u-cell>
                </u-cell-group>
            </view>
        </view>
        <!--        <view class="kf">
                    <u-button type="primary" color="#E1BC6D" open-type="contact" icon="kefu-ermai" ></u-button>
                </view>-->
        <!--    邀请码    -->
        <u-popup :show="showQrCode" @close="showQrCode=false" mode="center" :round="10" :safeAreaInsetBottom="false">
            <view style="padding: 30rpx;">
                <u-image width="300rpx" height="300rpx" :src="myInfoVo.qrCodeUrl"></u-image>
            </view>
        </u-popup>
        <u-popup :show="showPhone" @close="showPhone = false" mode="center" :round="10" :safeAreaInsetBottom="false">
            <view class="qrcode" style="margin: 40rpx;" @click="handleCall">
                <view class="phone">
                    <u-icon :customStyle="{paddingTop:10+'rpx'}" name="phone" :size="18"></u-icon>
                    <text>{{phone}}</text>
                </view>
                <text class="desc">点击拨打客服电话</text>
            </view>
        </u-popup>
        <!-- 提现弹窗 -->
        <u-modal :show="showAudit" title="提现" :showCancelButton="true" @confirm="handleConfirm" @cancel="showAudit = false">
            <u--form labelPosition="left" :model="cash" ref="uForm" :rules="rules">
                <u-form-item label="账号" prop="alipay" ref="item1">
                    <u--input v-model="cash.alipay" placeholder="请输入支付宝收款账号"></u--input>
                </u-form-item>
                <u-form-item label="金额" prop="balance" ref="item2">
                    <u--input v-model="cash.balance" placeholder="请输入提现金额"></u--input>
                </u-form-item>
            </u--form>
        </u-modal>
        <!-- 上传简历 -->
        <u-modal :show="pdfShow" title="上传简历" :showCancelButton="true" @confirm="handlePdfConfirm" @cancel="handlePdfCancel">
            <view class="dis_f_co_c_c">
                <u-upload
                    :fileList="fileList1"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    capture="album"
                    accept="file"
                    name="1"
                    multiple
                    :maxCount="1"
                ></u-upload>
                <view class="c_9 m_t_5 f_s_14">请上传简历</view>
            </view>
        </u-modal>
        <!-- 用户昵称和图像 -->
        <s-wx-auth ref="authRef" @getMyInfo="getMyInfo"></s-wx-auth>
        <!-- 授权弹窗 -->
        <s-auth-modal />
    </view>
</template>

<script>
import {getMyInfoApi, getByKeyApi, auditApi, getUnReadApi, uploadResumeApi} from "@/sheep/api/index";
import { mapGetters, mapMutations } from "vuex";
import {baseUrl} from "@/sheep/request/baseUrl";
export default {
    data() {
        return {
            pdfShow:false,
            fileList1:[],
            isUp:'',
            isAll:0,
            isCash: false,
            timer: null,
            phone: "",
            showQrCode: false,
            showAudit: false,
            titleHeight: 0,
            customTop: 0,
            paramsPage: {
                pageNum: 1,
                pageSize: 10,
            },
            myInfoVo: {},
            showPhone: false,
            orderTab: [
                { name: "全部", value:2, imgUrl: "/static/img/order-1.png" },
                { name: "派送中",value:3, imgUrl: "/static/img/order-2.png" },
                { name: "待收货",value:4, imgUrl: "/static/img/order-5.png" },
                { name: "已完成",value:5, imgUrl: "/static/img/order-3.png" },
                // { name: "购物车", imgUrl: "/static/img/order-4.png" },
            ],
            goodsTab: [
                { name: "去发布", imgUrl: "/static/img/goods1.png" },
                { name: "任务列表", imgUrl: "/static/img/goods2.png" },
                { name: "派送中", imgUrl: "/static/img/goods3.png" },
                { name: "已完成", imgUrl: "/static/img/goods4.png" },
            ],
            cash: {
                alipay: "",
                balance: "",
            },
            rules: {
                alipay: {
                    type: "string",
                    required: true,
                    message: "请填写收款账号",
                    trigger: ["blur", "change"],
                },
                balance: {
                    type: "number",
                    required: true,
                    message: "请填写提现金额",
                    trigger: ["blur", "change"],
                },
            },
        };
    },
    onLoad() {
        this.getHeight();
        this.getPhone();
        this.getIsCash();
        this.getIsAll();
    },
    onShow() {
        this.getMyInfo();
        this.getIsUp();

    },
    onHide() {
        // 清除定时器
        clearInterval(this.timer);
    },
    computed: {
        ...mapGetters(["userInfo"]),
    },
    methods: {
        ...mapMutations({
            setUserInfo: "user/setUserInfo",
        }),
        async getIsUp() {
            let res = await getByKeyApi("is_up");
            this.isUp = res.data[0].configValue;
        },
        handleToSend(){
            uni.navigateTo({
                url: "/pages/mine/mySend",
            });
        },
        handleToApply(){
            uni.navigateTo({
                url: "/pages/mine/mySendApply",
            });
        },
        handleToLike(){
            uni.navigateTo({
                url: "/pages/mine/myLike",
            });
        },
        handleToRealName(){
            uni.navigateTo({
                url: "/pages/mine/realName",
            });
        },
        handleToAboutUs(type){
            uni.navigateTo({
                url: "/pages/mine/aboutUs?type="+type,
            });
        },
        handleToVip(){
            uni.navigateTo({
                url: "/pages/mine/vipList",
            });
        },
        handleToIssue(){
            uni.navigateTo({
                url: "/pages/mine/addIssue",
            });
        },
        handleToCommission(){
            uni.navigateTo({
                url: "/pages/mine/commissionList",
            });
        },
        handleToDistribution(){
            uni.navigateTo({
                url: "/pages/mine/distributionList",
            });
        },
        handleExit(){},
        handleAvatar() {
            this.$refs.authRef.open(this.myInfoVo.nickName, this.myInfoVo.wxAvatar);
        },
        handleCashRecord(type) {
            uni.navigateTo({
                url: "/pages/cashRecord/index?type="+type,
            });
        },
        handleShowPdf(){
            // this.pdfShow=true
            uni.navigateTo({
                url: "/pages/uploadPdf/index",
            });
        },
        handleToPdf(){
  /*          uni.navigateTo({
                url: "/pages/index/pdf?url="+ this.myInfoVo.pdfUrl,
            });*/
            let that = this
            uni.downloadFile({
                url: that.myInfoVo.pdfUrl,
                success: function (res) {
                    // 下载成功
                    uni.saveFile({
                        tempFilePath: res.tempFilePath,
                        success: function (res) {
               /*             uni.showToast({
                                title: "下载成功",
                                icon: "none",
                            });*/
                            // 打开文件
                            uni.openDocument({
                                filePath: res.savedFilePath,
                                showMenu: true,
                                success: function () {},
                            });
                        },
                        fail: function (err) {
                            uni.showToast({
                                title: "下载失败",
                                icon: "none",
                            });
                        },
                    });
                },
            });
        },
        handleHave(){
            uni.navigateTo({
                url: "/pages/mine/have",
            });
        },
        // 获取微信右上角胶囊高度
        getHeight() {
            let res = uni.getMenuButtonBoundingClientRect();
            this.titleHeight = res.top + 10;
            this.customTop = res.top + 3;
        },
        // 提现
        handleConfirm() {
            this.$refs.uForm
                .validate()
                .then((res) => {
                    auditApi(this.cash).then((res) => {
                        if (res.code === 200) {
                            this.showAudit = false;
                            this.getMyInfo();
                        }
                    });
                })
                .catch((errors) => {
                    console.log(errors);
                });
        },
        handlePdfCancel(){
            this.pdfShow=false
        },
        handlePdfConfirm(){
            let pdf = ''
            if (this.fileList1.length==0){
                uni.showToast({
                    title: '请上传简历',
                    icon: 'none'
                })
                return
            }
            if (Array.isArray(this.fileList1)) {
                if (this.fileList1.length > 0) {
                    this.fileList1.forEach((item, index) => {
                        if (index === 0) {
                            pdf = item.ossId;
                        } else {
                            pdf = pdf + "," + item.ossId;
                        }
                    });
                } else {
                    pdf = "";
                }
            }
            uploadResumeApi({pdf:pdf,userId:this.myInfoVo.userId}).then(res => {
                uni.showToast({
                    title: res.msg,
                    icon: 'none'
                })
                this.pdfShow = false
                this.getMyInfo()
            })
        },
        getMyInfo() {
            getMyInfoApi().then((res) => {
                this.myInfoVo = res.data;
                this.setUserInfo(this.myInfoVo);
            });
        },
        copy(value) {
            uni.setClipboardData({
                data: value,
                success: function () {
                    uni.showToast({
                        title: "复制成功",
                        icon: "none",
                    });
                },
            });
        },
        handleOrder(index) {
            uni.navigateTo({
                url: "/pages/order/index?type="+index,
            });
        },
        handlerMyGoods(index) {
            if (index == 3) {
                uni.navigateTo({
                    url: "/pages/mygoods/index?type=6",
                });
            } else if (index == 2) {
                uni.navigateTo({
                    url: "/pages/mygoods/index?type=4",
                });
            } else if (index == 1) {
                uni.navigateTo({
                    url: "/pages/mygoods/index?type=0",
                });
            } else if (index == 0){
                uni.navigateTo({
                    url: "/pages/mine/goodRelease",
                });
            }
        },
        handleCall() {
            uni.makePhoneCall({
                phoneNumber: this.phone,
            });
        },
        async getPhone() {
            let res = await getByKeyApi("phone");
            this.phone = res.data[0].configValue;
        },
        async getIsCash() {
            let res = await getByKeyApi("is_cash");
            this.isCash = res.data[0].configValue == 1;
        },
        async getIsAll() {
            let res = await getByKeyApi("is_all");
            this.isAll = res.data[0].configValue;
        },
        // 上传图片
        async afterRead(event) {
            let lists = [].concat(event.file);
            console.log("lists", lists);
            console.log(" this[`fileList${event.name}`]",  this[`fileList${event.name}`]);
            let fileListLen = this[`fileList${event.name}`].length;
            console.log("fileListLen", fileListLen);
            lists.map((item, index) => {
                this[`fileList${event.name}`].push({
                    ...item,
                    status: "uploading",
                    message: "上传中",
                });
            });
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url, lists, event);
                console.log("result", result);
                let item = this[`fileList${event.name}`][fileListLen];
                this[`fileList${event.name}`].splice(
                    fileListLen,
                    1,
                    Object.assign(item, {
                        status: "success",
                        message: "",
                        url: result.url,
                        name: result.fileName,
                        ossId: result.ossId
                    })
                );
                fileListLen++;
            }
        },
        uploadFilePromise(url, lists, event) {
            let token = uni.getStorageSync('token')
            let headerToken = "Bearer " + token
            return new Promise((resolve, reject) => {
                let a = uni.uploadFile({
                    url: baseUrl + "/resource/oss/upload",
                    filePath: url,
                    name: "file",
                    header: {
                        Authorization: headerToken,
                        clientId: "be7052a7e4f802c20df10a8d131adb12"
                    },
                    formData: {
                        user: "test",
                    },
                    success: (res) => {
                        let data = JSON.parse(res.data);
                        console.log("data", data);
                        if (data.code == 200) {
                            resolve(data.data);
                        } else {
                            if (lists.length > 0) {
                                lists.map((item, index) => {
                                    this[`fileList${event.name}`].splice(index, 1)
                                });
                            }
                            uni.showToast({
                                title: data.msg,
                                icon: "none",
                            });
                        }
                    },
                });
            });
        },
        // 删除图片
        deletePic(event) {
            this[`fileList${event.name}`].splice(event.index, 1);
        },
    },
};
</script>

<style lang="scss" scoped>
/deep/.u-modal__content{
    display: unset!important;
}
.kf{
    position: absolute;
    bottom: 100rpx;
    right: 40rpx;
    z-index:999;
    /deep/.u-button--square{
        border-radius: 50rpx;
    }
}
.mine {
    background-color: #f5f5f5;
    height: 100vh;
    position: relative;
    .custom {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        font-size: 40rpx;
        font-weight: bolder;
        display: flex;
        align-items: center;
        z-index: 1;
    }
    .main {
        padding: 0 10rpx;
        .header {
            display: flex;
            padding: 42rpx 0;
            color: #fff;
            justify-content: space-between;
            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background: url("https://gsdq-1329143881.cos.ap-beijing.myqcloud.com/minebg.png")
                no-repeat;
                background-size: 100% auto;
            }
        }
    }
    .index {
        padding: 30rpx;
        position: relative;
        z-index: 99;
        .info {
            font-size: 24rpx;
            color: #999999;
            display: flex;
            align-items: center;
        }
        .avatar {
            padding: 30rpx;
            padding-bottom: 0;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 20rpx;
            .avatar-box {
                height: 50%;
                display: flex;
                margin-bottom: 20rpx;
                .userId {
                    margin-left: 20rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    .phonenumber {
                        display: flex;
                        align-items: center;
                        font-weight: 700;
                    }
                }
            }
            .vip_box{
                background-color: #B79152;
                border-top-left-radius: 20rpx;
                border-top-right-radius: 20rpx;
            }
        }
        .order {
            margin-top: 30rpx;
            padding: 30rpx;
            background-color: #fff;
            border-radius: 20rpx;
            .kefu {
                margin: 20rpx 0 30rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .kefu-left {
                    display: flex;
                    align-items: center;
                    font-size: 30rpx;
                }
            }
        }
        .title {
            font-size: 30rpx;
            font-weight: 700;
            margin-bottom: 20rpx;
        }
        .grid-text {
            margin: 16rpx 0;
            font-size: 24rpx;
        }
    }
    .qrcode {
        padding: 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .phone {
            display: flex;
            align-items: center;
        }
        .desc {
            font-size: 24rpx;
            color: #999999;
            margin-top: 10rpx;
        }
    }
}
</style>
